// ref 的函数表示形式
import React, { Component } from 'react'
export default class UpdateCom extends Component {
  //声明状态
  state = {
    msgs: [
      'a',
      'b',
      'c'
    ]
  }

  // 声明 show 方法
  show = () => {
    //获取当前 input 框输入的值
    let v = this.input.value;
    //新增状态
    this.setState({
      msgs: [...this.state.msgs, v]
    })
  }

  //声明 componentDidUpdate
  componentDidUpdate(){
    //获取 div
    let div = this.div;
    //设置 div 的垂直滚动距离
    div.scrollTop = div.scrollHeight;
  }

  render() {
    //输出 msgs 的值
    console.log(this.state.msgs);
    return (
      <div>
        {/* ref 对应的回调函数会在组件渲染完毕之后, 自动执行.  */}
        {/* 该函数执行时会接收到一个实参, 实参就是当前虚拟 DOM 对应的真实 DOM 对象 */}
        <input ref={(el) => {
          //保存 input 真实 DOM 对象
          this.input = el;
        }} type="text" /><button onClick={this.show}>显示</button>
        <hr />
        <div ref={el => this.div = el}  style={{width: 400, height: 300, border: 'solid 1px #333', overflowY: 'auto'}}>
          <ul>
            {
              this.state.msgs.map((item, index) => <li key={index}>{item}</li>)
            }
          </ul>
        </div>
      </div>
    )
  }
}
